<template>
  <div class="template-center">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>模板中心</h1>
      <p>丰富的页面模板，快速搭建应用</p>
    </div>

    <!-- 搜索和筛选 -->
    <div class="filter-section">
      <el-row :gutter="20" class="mb-4">
        <el-col :span="8">
          <el-input
            v-model="searchText"
            placeholder="搜索模板..."
            size="large"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="selectedCategory"
            placeholder="选择分类"
            size="large"
            clearable
            @change="handleFilter"
          >
            <el-option
              v-for="category in categories"
              :key="category.value"
              :label="category.label"
              :value="category.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="selectedStyle"
            placeholder="选择风格"
            size="large"
            clearable
            @change="handleFilter"
          >
            <el-option
              v-for="style in styles"
              :key="style.value"
              :label="style.label"
              :value="style.value"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="large" @click="resetFilters">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 统计信息 -->
    <el-row :gutter="20" class="stats-section mb-4">
      <el-col :span="6" v-for="stat in stats" :key="stat.title">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" :style="{background: stat.color}">
              <el-icon :size="24">
                <component :is="stat.icon"/>
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-title">{{ stat.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 模板网格 -->
    <div class="template-grid">
      <el-row :gutter="24">
        <el-col
          :span="6"
          v-for="template in filteredTemplates"
          :key="template.id"
          class="mb-4"
        >
          <el-card class="template-card" :body-style="{ padding: '0px' }">
            <div class="template-preview">
              <img :src="template.preview" :alt="template.title" />
              <div class="template-overlay">
                <el-button-group>
                  <el-button type="primary" @click="showPreview(template)">
                    <el-icon><View /></el-icon>
                    预览
                  </el-button>
                  <el-button type="success" @click="useTemplate(template)">
                    <el-icon><Download /></el-icon>
                    使用
                  </el-button>
                </el-button-group>
              </div>
            </div>
            <div class="template-info">
              <h3 class="template-title">{{ template.title }}</h3>
              <p class="template-desc">{{ template.description }}</p>
              <div class="template-meta">
                <el-tag size="small" :type="getCategoryType(template.category)">
                  {{ template.category }}
                </el-tag>
                <el-tag size="small" effect="plain">{{ template.style }}</el-tag>
                <div class="template-stats">
                  <span class="downloads">
                    <el-icon><Download /></el-icon>
                    {{ template.downloads }}
                  </span>
                  <el-rate
                    v-model="template.rating"
                    disabled
                    size="small"
                    :colors="['#ff9900', '#ff9900', '#ff9900']"
                  />
                </div>
              </div>
              <div class="template-actions">
                <el-button size="small" @click="likeTemplate(template)">
                  <el-icon><Star /></el-icon>
                  {{ template.likes }}
                </el-button>
                <el-button size="small" type="primary" @click="useTemplate(template)">
                  立即使用
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[8, 16, 24, 32]"
        :total="totalTemplates"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 模板预览弹窗 -->
    <el-dialog
      v-model="previewVisible"
      :title="previewTemplate?.title"
      width="80%"
      top="5vh"
    >
      <div class="template-preview-content">
        <img :src="previewTemplate?.preview" :alt="previewTemplate?.title" />
        <div class="preview-info">
          <h3>{{ previewTemplate?.title }}</h3>
          <p>{{ previewTemplate?.description }}</p>
          <div class="preview-features">
            <h4>主要特性：</h4>
            <ul>
              <li v-for="feature in previewTemplate?.features" :key="feature">
                {{ feature }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="previewVisible = false">取消</el-button>
        <el-button type="primary" @click="useTemplate(previewTemplate)">
          使用此模板
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search,
  Refresh,
  View,
  Download,
  Star,
  Document,
  Grid,
  DataLine,
  User
} from '@element-plus/icons-vue'

// 响应式数据
const searchText = ref('')
const selectedCategory = ref('')
const selectedStyle = ref('')
const currentPage = ref(1)
const pageSize = ref(8)
const previewVisible = ref(false)
const previewTemplate = ref(null)

// 筛选选项
const categories = ref([
  { value: '管理后台', label: '管理后台' },
  { value: '数据展示', label: '数据展示' },
  { value: '表单页面', label: '表单页面' },
  { value: '详情页面', label: '详情页面' },
  { value: '列表页面', label: '列表页面' },
  { value: '登录注册', label: '登录注册' }
])

const styles = ref([
  { value: '现代简约', label: '现代简约' },
  { value: '商务专业', label: '商务专业' },
  { value: '创意设计', label: '创意设计' },
  { value: '扁平化', label: '扁平化' }
])

// 统计数据
const stats = ref([
  {
    title: '总模板数',
    value: '128',
    icon: 'Document',
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    title: '热门模板',
    value: '24',
    icon: 'Star',
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  {
    title: '新增本月',
    value: '16',
    icon: 'DataLine',
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  },
  {
    title: '用户收藏',
    value: '2,456',
    icon: 'User',
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  }
])

// 模板数据
const templates = ref([
  {
    id: 1,
    title: '现代管理后台',
    description: '简洁现代的管理后台模板，包含完整的用户管理、数据展示等功能模块',
    category: '管理后台',
    style: '现代简约',
    preview: 'https://via.placeholder.com/300x200/667eea/ffffff?text=Modern+Admin',
    downloads: 1234,
    likes: 89,
    rating: 4.8,
    features: ['响应式设计', '多主题支持', '权限管理', '图表展示']
  },
  {
    id: 2,
    title: '数据分析仪表盘',
    description: '专业的数据分析仪表盘，支持多种图表类型和实时数据更新',
    category: '数据展示',
    style: '商务专业',
    preview: 'https://via.placeholder.com/300x200/f093fb/ffffff?text=Data+Dashboard',
    downloads: 856,
    likes: 67,
    rating: 4.6,
    features: ['实时数据', '多图表支持', '数据导出', '自定义配置']
  },
  {
    id: 3,
    title: '用户注册登录',
    description: '美观的用户注册登录页面，支持多种登录方式和表单验证',
    category: '登录注册',
    style: '创意设计',
    preview: 'https://via.placeholder.com/300x200/4facfe/ffffff?text=Login+Page',
    downloads: 2156,
    likes: 156,
    rating: 4.9,
    features: ['多登录方式', '表单验证', '密码重置', '社交登录']
  },
  {
    id: 4,
    title: '产品展示列表',
    description: '电商产品展示列表页面，支持筛选、排序和分页功能',
    category: '列表页面',
    style: '扁平化',
    preview: 'https://via.placeholder.com/300x200/43e97b/ffffff?text=Product+List',
    downloads: 678,
    likes: 45,
    rating: 4.4,
    features: ['商品筛选', '价格排序', '批量操作', '购物车集成']
  },
  {
    id: 5,
    title: '高级表单页面',
    description: '功能完整的表单页面模板，包含各种输入组件和表单验证',
    category: '表单页面',
    style: '现代简约',
    preview: 'https://via.placeholder.com/300x200/764ba2/ffffff?text=Advanced+Form',
    downloads: 945,
    likes: 78,
    rating: 4.7,
    features: ['表单验证', '文件上传', '动态表单', '分步表单']
  },
  {
    id: 6,
    title: '订单详情页面',
    description: '详细的订单信息展示页面，包含订单状态追踪和操作按钮',
    category: '详情页面',
    style: '商务专业',
    preview: 'https://via.placeholder.com/300x200/f5576c/ffffff?text=Order+Detail',
    downloads: 523,
    likes: 34,
    rating: 4.3,
    features: ['状态追踪', '打印功能', '退款处理', '物流查询']
  },
  {
    id: 7,
    title: '销售数据大屏',
    description: '大屏数据展示模板，适用于会议室和展示厅的数据可视化',
    category: '数据展示',
    style: '创意设计',
    preview: 'https://via.placeholder.com/300x200/00f2fe/ffffff?text=Sales+Screen',
    downloads: 234,
    likes: 23,
    rating: 4.5,
    features: ['全屏展示', '动画效果', '实时刷新', '多屏适配']
  },
  {
    id: 8,
    title: '团队管理系统',
    description: '完整的团队管理系统模板，包含成员管理、项目分配等功能',
    category: '管理后台',
    style: '扁平化',
    preview: 'https://via.placeholder.com/300x200/38f9d7/ffffff?text=Team+Management',
    downloads: 789,
    likes: 56,
    rating: 4.6,
    features: ['成员管理', '权限分配', '项目跟踪', '考勤统计']
  }
])

// 计算属性
const filteredTemplates = computed(() => {
  let result = templates.value

  // 搜索过滤
  if (searchText.value) {
    result = result.filter(template =>
      template.title.toLowerCase().includes(searchText.value.toLowerCase()) ||
      template.description.toLowerCase().includes(searchText.value.toLowerCase())
    )
  }

  // 分类过滤
  if (selectedCategory.value) {
    result = result.filter(template => template.category === selectedCategory.value)
  }

  // 风格过滤
  if (selectedStyle.value) {
    result = result.filter(template => template.style === selectedStyle.value)
  }

  return result
})

const totalTemplates = computed(() => filteredTemplates.value.length)

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleFilter = () => {
  currentPage.value = 1
}

const resetFilters = () => {
  searchText.value = ''
  selectedCategory.value = ''
  selectedStyle.value = ''
  currentPage.value = 1
}

const getCategoryType = (category) => {
  const types = {
    '管理后台': 'primary',
    '数据展示': 'success',
    '表单页面': 'warning',
    '详情页面': 'info',
    '列表页面': 'danger',
    '登录注册': 'primary'
  }
  return types[category] || 'info'
}

const showPreview = (template) => {
  previewTemplate.value = template
  previewVisible.value = true
}

const useTemplate = (template) => {
  ElMessageBox.confirm(
    `确定要使用模板 "${template.title}" 吗？这将创建一个新的页面。`,
    '确认使用模板',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    ElMessage.success(`正在应用模板 "${template.title}"...`)
    // 这里可以添加模板应用逻辑
    setTimeout(() => {
      ElMessage.success('模板应用成功！')
    }, 2000)
  }).catch(() => {
    ElMessage.info('已取消')
  })
}

const likeTemplate = (template) => {
  template.likes++
  ElMessage.success('已收藏模板')
}

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}

onMounted(() => {
  ElMessage.info('模板中心加载完成')
})
</script>

<style scoped lang="scss">
.template-center {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 120px);

  .page-header {
    margin-bottom: 32px;
    
    h1 {
      font-size: 28px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0 0 8px 0;
    }
    
    p {
      color: #7f8c8d;
      font-size: 14px;
      margin: 0;
    }
  }

  .filter-section {
    margin-bottom: 24px;
    
    :deep(.el-input__inner) {
      border-radius: 8px;
    }
    
    :deep(.el-select) {
      width: 100%;
      
      .el-input__inner {
        border-radius: 8px;
      }
    }
  }

  .stats-section {
    .stat-card {
      border-radius: 12px;
      border: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      
      :deep(.el-card__body) {
        padding: 20px;
      }
      
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          color: white;
        }
        
        .stat-info {
          .stat-value {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
            line-height: 1;
          }
          
          .stat-title {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 4px;
          }
        }
      }
    }
  }

  .template-grid {
    .template-card {
      border-radius: 16px;
      border: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        
        .template-overlay {
          opacity: 1;
        }
      }
      
      .template-preview {
        position: relative;
        height: 200px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .template-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.7);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;
        }
      }
      
      .template-info {
        padding: 20px;
        
        .template-title {
          font-size: 18px;
          font-weight: 600;
          color: #2c3e50;
          margin: 0 0 8px 0;
        }
        
        .template-desc {
          font-size: 14px;
          color: #7f8c8d;
          line-height: 1.5;
          margin: 0 0 16px 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .template-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 16px;
          
          .template-stats {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            
            .downloads {
              display: flex;
              align-items: center;
              gap: 4px;
              font-size: 12px;
              color: #7f8c8d;
            }
          }
        }
        
        .template-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }

  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }

  .template-preview-content {
    display: flex;
    gap: 24px;
    
    img {
      width: 50%;
      border-radius: 8px;
    }
    
    .preview-info {
      flex: 1;
      
      h3 {
        font-size: 24px;
        font-weight: 600;
        color: #2c3e50;
        margin: 0 0 16px 0;
      }
      
      p {
        font-size: 16px;
        color: #7f8c8d;
        line-height: 1.6;
        margin: 0 0 24px 0;
      }
      
      .preview-features {
        h4 {
          font-size: 16px;
          font-weight: 600;
          color: #2c3e50;
          margin: 0 0 12px 0;
        }
        
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
          
          li {
            padding: 4px 0;
            color: #606266;
            position: relative;
            padding-left: 16px;
            
            &:before {
              content: '•';
              color: #409eff;
              position: absolute;
              left: 0;
            }
          }
        }
      }
    }
  }

  .mb-4 {
    margin-bottom: 24px;
  }
}
</style>
